import path from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import AutoImport from 'unplugin-auto-import/vite';
import vueUseAddons from './vite.vueuse.import';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// import {
//   ElementPlusResolve,
//   createStyleImportPlugin,
// } from 'vite-plugin-style-import';
import vitePluginImp from 'vite-plugin-imp';
import Inspect from 'vite-plugin-inspect';

const pathSrc = path.resolve(__dirname, 'src');

export default defineConfig({
  server:{
    port: 5173,
    strictPort: true
  },
  // 路径别名
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  // 覆盖element样式并自动导入的必要配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/element-theme.scss" as *;',
      },
    },
  },
  plugins: [
    Vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: [
        'vue',
        'pinia',
        'vue-router',
        '@vueuse/core',
        '@vueuse/head',
        '@vueuse/math',
        vueUseAddons(),
      ],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      // (前面是官方的注释，实际没有样式，需要补充自动引入，下面有)
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver(),
      ],

      // 让eslint识别自动导入的方法
      eslintrc: {
        enabled: true,
      },
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver(),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),

    // 自动安装iconify图标包
    Icons({
      autoInstall: true,
    }),

    // 这个插件跟下面的vitePluginImp功能一样，但停止维护了，留着备用
    // createStyleImportPlugin({
    //   resolves: [ElementPlusResolve()],
    // }),

    // 自动为element内置方法导入样式
    vitePluginImp({
      libList: [
        {
          libName: 'element-plus',
          libDirectory: 'es/components',
          nameFormatter: name => {
            return name.replace('el-', '');
          },
          style: name => {
            if (['el-config-provider', 'effect'].includes(name)) return false;
            return `element-plus/theme-chalk/${name}.css`;
          },
        },
      ],
    }),
    // 载入性能分析插件
    Inspect(),
  ],
});
